<template>
  <div class="student-dashboard">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">学生仪表板</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 课程信息卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">我的课程</h2>
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-gray-600">当前课程数</span>
            <span class="text-blue-600 font-bold">{{ dashboardData.courseCount || 0 }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-gray-600">本周作业</span>
            <span class="text-orange-600 font-bold">{{ dashboardData.weeklyHomeworkCount || 0 }}</span>
          </div>
        </div>
      </div>

      <!-- 成绩信息卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">成绩概览</h2>
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-gray-600">平均分</span>
            <span class="text-green-600 font-bold">{{ gradeData.averageScore || 0 }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-gray-600">排名</span>
            <span class="text-purple-600 font-bold">{{ gradeData.rank || 0 }}/{{ gradeData.totalStudents || 0 }}</span>
          </div>
        </div>
      </div>

      <!-- 通知信息卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center">
          <el-icon class="w-5 h-5 mr-2" :color="notifications.length > 0 ? 'blue': 'gray' ">
            <Bell />
          </el-icon>
          最新通知
        </h2>
        <div class="space-y-2">
          <div v-for="notification in notifications.slice(0, 3)" :key="notification.id" class="text-sm text-gray-600">
            • {{ notification.message }}
          </div>
          <div v-if="notifications.length === 0" class="text-sm text-gray-400 italic">
            暂无通知
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Bell } from '@element-plus/icons-vue'
import { 
  getStudentDashboardOverview, 
  getStudentGradeOverview, 
  getStudentNotifications 
} from '@/api/student/dashboard'

// 响应式数据
const dashboardData = ref({})
const gradeData = ref({})
const notifications = ref([])
const loading = ref(false)

// 获取仪表板概览数据
const fetchDashboardOverview = async () => {
  try {
    loading.value = true
    const response = await getStudentDashboardOverview()
    dashboardData.value = response.data
  } catch (error) {
    console.error('获取仪表板概览失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取成绩概览数据
const fetchGradeOverview = async () => {
  try {
    const response = await getStudentGradeOverview()
    gradeData.value = response.data
  } catch (error) {
    console.error('获取成绩概览失败:', error)
  }
}

// 获取通知列表
const fetchNotifications = async () => {
  try {
    const response = await getStudentNotifications({ page: 1, size: 10 })
    notifications.value = response.data.records || []
  } catch (error) {
    console.error('获取通知列表失败:', error)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDashboardOverview()
  fetchGradeOverview()
  fetchNotifications()
})
</script>

<style scoped>
.student-dashboard {
  padding: 2rem;
  background-color: #f8fafc;
  min-height: 100vh;
}
</style> 